import { useInitState } from '@/hooks/useInitState'
import { getUserDetail } from '@/store/actions/profile'
// import { UserProfile } from '@/types/data'
// import { RootState } from '@/types/store'
import { Button, List, DatePicker, NavBar, Popup } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
// import { useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import EditInput from '../EditInput'

import styles from './index.module.scss'

const Item = List.Item

type Popup1StateType = {
  type: '' | 'name' | 'intro'
  visible: boolean
}

const ProfileEdit = () => {
  const history = useHistory()
  // 获取用户详细信息
  // const dispatch = useDispatch()
  // const userProfile = useSelector<RootState, UserProfile>((state) => state.profile.userProfile)
  // console.log(userProfile,'userProfile')
  // useEffect(() => {
  //   dispatch(getUserDetail())
  // }, [dispatch])
  const userProfile =  useInitState(getUserDetail).profile.userProfile
  const [popup1State, setPopup1State] = useState<Popup1StateType>({
    type: '', // 是昵称还是简介
    visible: false // 弹层的显示和隐藏
  })

  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0'
          }}
          onBack={() => {
            history.go(-1)
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={userProfile.photo}
                    alt=""
                  />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item arrow extra={userProfile.name} onClick={() => {
              setPopup1State({
                visible: true,
                type: 'name'
              })
            }}>
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames('intro', userProfile.intro && 'normal')}>
                  { userProfile.intro || '未填写' }
                </span>
              }
              onClick={() => {
                setPopup1State({
                  visible: true,
                  type: 'intro'
                })
              }}
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={ userProfile.gender === 0 ? '男' : '女' }>
              性别
            </Item>
            <Item arrow extra={ userProfile.birthday }>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn">退出登录</Button>
        </div>
        {/* 弹出层：昵称和简介 */}
        <Popup position='right' visible={popup1State.visible} bodyStyle={{width: '100vw'}}>
          <EditInput 
          type={popup1State.type}
          ClosePopup={() => {
            setPopup1State({
              type: '',
              visible: false
            })
          }}></EditInput>
        </Popup>
      </div>
    </div>
  )
}

export default ProfileEdit
